<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 300px;
        margin: 100px auto;
    }

    ul li {
        background-color: pink;
        margin-top: 10px;
        width: 200px;
    }
</style>

<body>
    <div class="box">
        <textarea name="" id=""></textarea>
        <button>发布留言</button>
        <ul>

        </ul>
    </div>

    <script>
        //留言板案例
        //核心思路：点击按钮后创建一个新的li，将新创建的Li添加到ul中去
        //创建li的同时将文本域里的值通过innerHTML 赋值给li
        //如果想要更新的留言后面显示就用appendChild,前面的话就用insertBefore

        //1、先获取元素
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');

        //2、给获取到的元素添加注册事件
        //点击按钮的时候创建一个li
        btn.onclick = function () {
            if (text.value == '') {
                alert("请输入内容");
                return false;
            } else {
                // console.log(text.value);
                var li = document.createElement('li');
                li.innerHTML = text.value;
                // ul.appendChild(li);
                ul.insertBefore(li,ul.children[0])
               
            }

        }


    </script>
</body>

</html>